<template>
  <div class="login">
    <div class="login-weaper">
      <div class="login-left">
        <div class="login-time">{{ time.txt }}</div>
        <div class="login-left-box">
          <div class="system-intro">
            <div class="logo">包车信息管理系统</div>
            <h2 class="title">专业运输企业解决方案</h2>
            <div class="msg">
              <div class="msg-txt">
                <p>专为运输企业打造的全方位管理平台，集成三大核心功能模块：</p>
                <ul class="feature-list">
                  <li><i class="icon-doc"></i>电子二维码生成</li>
                  <li><i class="icon-qrcode"></i>驾驶员资料管理</li>
                  <li><i class="icon-doc"></i>用户登录管理</li>
                </ul>
                <p class="highlight">运输企业客运包车驾驶员信息备案</p>
                <p class="highlight">包车标志牌电子化管理</p>
                <p class="highlight">跨区域运输信息快速核验</p>
              </div>
              <div class="decorative-elements">
                <svg class="route-icon" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10,50 C30,30 50,70 70,50 C90,30 110,70 130,50 C150,30 170,70 190,50" stroke="#ffffff" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
                  <circle cx="10" cy="50" r="5" fill="#ffffff"/>
                  <circle cx="190" cy="50" r="5" fill="#ffffff"/>
                  <path d="M170,50 L190,50 M10,50 L30,50" stroke="#ffffff" stroke-width="2"/>
                </svg>
                <svg class="car-icon" viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5" y="10" width="50" height="15" rx="3" fill="white"/>
                  <circle cx="15" cy="25" r="3" fill="white"/>
                  <circle cx="45" cy="25" r="3" fill="white"/>
                  <rect x="25" y="5" width="10" height="5" rx="1" fill="white"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="login-right">
        <div class="login-main">
          <div class="login-header">
            <h4 class="login-title">用户登录</h4>
            <div class="login-subtitle">欢迎使用包车信息管理系统</div>
          </div>
          <el-form class="el-form login-form">
            <el-form-item style="margin-left: 0px" prop="username">
              <el-input
                  type="text"
                  :placeholder="$t('message.login.placeholder1')"
                  prefix-icon="el-icon-user"
                  v-model="ruleForm.username"
                  clearable
                  autocomplete="off"
              >
              </el-input>
            </el-form-item>
            <el-form-item style="margin-left: 0px" prop="password">
              <el-input
                  type="password"
                  :placeholder="$t('message.login.placeholder2')"
                  prefix-icon="el-icon-lock"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  :show-password="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item style="margin-left: 0px" prop="captcha">
              <div class="el-row" span="24">
                <div class="el-col el-col-14">
                  <el-input
                      type="text"
                      maxlength="5"
                      :placeholder="$t('message.login.placeholder3')"
                      prefix-icon="el-icon-position"
                      v-model="ruleForm.captcha"
                      clearable
                      autocomplete="off"
                  ></el-input>
                </div>
                <div class="el-col el-col-10">
                  <div class="login-code" @click="getIdentifyingCode(true)">
                    <img id="imgIdentifyingCode" class="login-code-img" alt="点击更换" title="点击更换">
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item style="margin: 40px 0px 0">
              <el-button type="primary" class="login-submit" @click="submitForm"
                         :loading="submit.loading">
                <span>{{ $t('message.login.btnText') }}</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="vue-particles">
      <vue-particles color="#e0f2fe" shapeType="circle" linesColor="#93c5fd" hoverMode="grab" clickMode="push"
                     style="height: 100%"></vue-particles>
    </div>
  </div>
</template>

<script>
import {Session} from '@/utils/storage';
import {formatAxis, formatDate} from '@/utils/formatTime';
import {PrevLoading} from '@/utils/loading.js';
import {quotationsList} from './mock';
import {useLoginApi} from '@/api/login';

export default {
  name: 'login',
  data() {
    return {
      quotationsList,
      quotations: {},
      isView: false,
      submit: {
        loading: false,
      },
      ruleForm: {
        username: '',
        password: '',
        captcha: '',
        randomStr: Math.floor(Math.random() * 999999999)
      },
      time: {
        txt: '',
        fun: null,
      },
    };
  },
  computed: {
    currentTime() {
      return formatAxis(new Date());
    },
    getThemeConfig() {
      return this.$store.state.themeConfig.themeConfig;
    },
  },
  created() {
    this.initTime();
  },
  mounted() {
    this.initRandomQuotations();
    this.getRandomStr()
    this.getIdentifyingCode(true)
  },
  methods: {
    getRandomStr() {
      this.ruleForm.randomStr = Math.floor(Math.random() * 999999999)
    },
    getIdentifyingCode(bRefresh) {
      let identifyCodeSrc = 'sys/code/' + this.ruleForm.randomStr
      if (bRefresh) {
        this.getRandomStr()
        identifyCodeSrc = 'sys/code/' + this.ruleForm.randomStr
      }
      const objs = document.getElementById('imgIdentifyingCode')
      objs.src = identifyCodeSrc
    },
    initRandomQuotations() {
      this.quotations = this.quotationsList[Math.floor(Math.random() * this.quotationsList.length)];
    },
    initTime() {
      this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
      this.time.fun = setInterval(() => {
        this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
      }, 1000);
    },
    submitForm() {
      this.submit.loading = true;
      useLoginApi().signIn(this.ruleForm).then((res) => {
        this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`);
        Session.set('token', res.token);
        PrevLoading.start();
        this.$router.push('/');
      }).catch(() => {
        this.submit.loading = false
      })
    },
  },
  destroyed() {
    clearInterval(this.time.fun);
  },
};
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  position: relative;

  .vue-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, rgba(30, 64, 175, 0.9) 0%, rgba(59, 130, 246, 0.8) 100%);
  }

  .login-weaper {
    margin: auto;
    height: 580px;
    width: 980px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;

    .login-left {
      width: 55%;
      padding: 40px;
      font-size: 16px;
      color: white;
      position: relative;
      background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
      display: flex;
      flex-direction: column;

      .login-time {
        width: 100%;
        color: rgba(255, 255, 255, 0.9);
        opacity: 0.9;
        font-size: 14px;
        overflow: hidden;
        margin-bottom: 20px;
      }

      .login-left-box {
        flex: 1;
        overflow: hidden;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;

        .system-intro {
          max-width: 500px;

          .logo {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 15px;
            letter-spacing: 0.5px;
          }

          .title {
            color: white;
            font-weight: 300;
            letter-spacing: 1px;
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
          }

          .msg {
            color: white;
            font-size: 14px;

            .msg-txt {
              line-height: 1.6;

              .highlight {
                margin-top: 20px;
                font-weight: 500;
                font-size: 15px;
                color: #e0f2fe;
              }
            }

            .feature-list {
              margin: 15px 0 15px 20px;
              padding: 0;
              list-style-type: none;

              li {
                margin-bottom: 10px;
                position: relative;
                padding-left: 25px;

                &:before {
                  content: "✓";
                  position: absolute;
                  left: 0;
                  color: #bfdbfe;
                  font-weight: bold;
                }
              }
            }

            .icon-car {
              margin-right: 8px;
            }

            .decorative-elements {
              position: relative;
              margin-top: 30px;
              height: 80px;

              .route-icon {
                width: 100%;
                height: 60px;
                opacity: 0.3;
                position: absolute;
                bottom: 0;
                left: 0;
              }

              .car-icon {
                width: 60px;
                height: 30px;
                position: absolute;
                bottom: 15px;
                left: 40px;
                opacity: 0.4;
                animation: moveCar 15s linear infinite;
              }

              @keyframes moveCar {
                0% { transform: translateX(0); }
                100% { transform: translateX(400px); }
              }
            }
          }
        }
      }
    }

    .login-right {
      width: 45%;
      padding: 40px;
      position: relative;
      align-items: center;
      display: flex;
      background-color: white;

      .login-main {
        margin: 0 auto;
        width: 100%;
        max-width: 320px;

        .login-header {
          text-align: center;
          margin-bottom: 40px;

          .login-title {
            color: #1e293b;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 24px;
            letter-spacing: 0;
          }

          .login-subtitle {
            color: #64748b;
            font-size: 14px;
          }
        }

        .login-form {
          margin: 10px 0;

          i {
            color: #64748b;
          }

          .el-form-item {
            margin-bottom: 25px !important;

            .login-code {
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin: 0 0 0 10px;
              user-select: none;

              .login-code-img {
                margin-top: 2px;
                width: 120px;
                height: 38px;
                border: 1px solid #e2e8f0;
                color: #64748b;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 5px;
                line-height: 38px;
                text-indent: 5px;
                text-align: center;
                cursor: pointer;
                transition: all ease 0.2s;
                border-radius: 4px;

                &:hover {
                  border-color: #94a3b8;
                  transition: all ease 0.2s;
                }
              }
            }

            .login-submit {
              width: 100%;
              letter-spacing: 2px;
              height: 44px;
              background: linear-gradient(90deg, #1E40AF 0%, #3B82F6 100%);
              border: none;
              transition: all 0.3s ease;

              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
              }
            }
          }

          .el-input {
            height: 44px;

            .el-input__inner {
              height: 44px;
              border-radius: 6px;
              border-color: #e2e8f0;
              transition: all 0.3s ease;

              &:focus {
                border-color: #3B82F6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
              }
            }
          }
        }
      }
    }
  }
}
</style>
